<style lang="less">
    @import './advanced-router.less';
</style>

<template>
    <div>
        <Row>
            <Col span="24">
                <Card>
                    <p slot="title">
                        <Icon type="ios-list"></Icon>
                        订单详情(动态路由)
                    </p>
                    <Row type="flex" justify="center" align="middle" class="advanced-router">
                        <Table :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        name: 'mutative-router',
        data() {
            return {
                orderColumns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 60
                    },
                    {
                        title: '订单号',
                        key: 'order_id',
                        align: 'center'
                    },
                    {
                        title: '用户',
                        key: 'user_name'
                    },
                    {
                        title: '详情',
                        key: 'show_more',
                        align: 'center',
                        render: (h, params) => {
                            return h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        let argu = {order_id: params.row.order_id};
                                        this.$router.push({
                                            name: 'order-info',
                                            params: argu
                                        });
                                    }
                                }
                            }, '了解详情');
                        }
                    }
                ],
                orderData: [
                    {
                        order_id: '1000001',
                        user_name: 'Aresn'
                    },
                    {
                        order_id: '1000002',
                        user_name: 'Lison'
                    },
                    {
                        order_id: '1000003',
                        user_name: 'lili'
                    },
                    {
                        order_id: '1000004',
                        user_name: 'lala'
                    }
                ]
            };
        },
        computed: {
            avatorImage() {
                return JSON.parse(sessionStorage.getItem('user')).logo;
            }
        }
    };
</script>
